import { useEffect, useState } from "react";
import { Select, Input, Table, Tag, Tooltip, Pagination } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { Nav } from "@/components/func";
import { hideUserGet } from "@/assets/js/networkRequest/method";
import { statusStr } from "@/assets/js/common";
import "./index.less";

const { Option } = Select;
const { Search } = Input;

const columns = [
  {
    title: "客户电话",
    width: 260,
    dataIndex: "customer_phone",
  },
  {
    title: "备注名",
    width: 200,
    dataIndex: "customer_remark",
    render: (text: string) => text || "-",
  },
  {
    title: "员工",
    width: 200,
    dataIndex: "distribution_employee_id",
    render: (text: any) => {
      return (
        <Tag
          className="leading-8 break-all whitespace-normal bg-white mb-4 text-xs border-grey-200 text-grey-800 mr-10"
          icon={<i className="iconfont icon-zhanghaoguanli text-blue-acd7ff mr-5"></i>}
          color="#fff">
          {text}
        </Tag>
      );
    },
  },
  {
    title: (
      <div>
        添加状态&nbsp;
        <Tooltip
          color="#fff"
          placement="top"
          title={
            <ul className="text-grey-800">
              <li>待分配：未分配跟进成员的客户</li>
              <li>待添加：成员未添加的客户</li>
              <li>待通过：已发送申请，等待通过的客户</li>
              <li>已添加：成功添加的客户</li>
            </ul>
          }>
          <QuestionCircleOutlined style={{ color: "#aaa" }} />
        </Tooltip>
      </div>
    ),
    width: 200,
    dataIndex: "customer_status",
    render: (text: number) => statusStr(text),
  },
  {
    title: "操作",
    width: 119,
    render: (text: any) => {
      return (
        <div className="flex text-blue-default">
          <Tooltip
            color="#fff"
            placement="top"
            title={<p className="text-grey-800">客户已添加完成</p>}>
            <span
              className={`py-0 px-8 leading-none whitespace-nowrap border-r-1 border-solid border-grey-200 h-auto cursor-pointer
              }`}>
              提醒
            </span>
          </Tooltip>
          <span
            className="cursor-pointer py-0 px-8 leading-none whitespace-nowrap h-auto"
            onClick={() => {
              window.globalState.muState("history", {
                type: "push",
                pathname: "/batch_add_user/record/detail",
                query: { id: text.id },
              });
            }}>
            添加
          </span>
        </div>
      );
    },
  },
];

// 保存列表数据
let initFormData: any = [];
let record_id: number = 253;
// 状态值
let status: string = "";
// 电话/备注名
let condition: string = "";
// 当前页
let current: number = 1;
// 总页
let page_total: number = 0;
// 每页条数
let limit: number = 10;
// 总条数
let customer_tatal: number = 0;

const AddUserRecordDetail = () => {
  let history: any = useHistory();
  const [, setRender] = useState(0);
  const [loding, setLoding] = useState(true);

  // 根据条件请求接口数据
  const requestFormData = async () => {
    setLoding(true);
    let res: any = await hideUserGet({ record_id, status, condition, current, limit });
    setLoding(false);
    if (res.code === 200) {
      initFormData = res.data.customer_info;
      page_total = res.data.page_tatal;
      customer_tatal = res.data.customer_tatal;
      initFormData.map((item: any, index: number) => {
        item.key = index;
        item.flag = false;
      });
      setRender(Math.random() + 1);
    }
  };

  // 筛选类型记录
  const onTypeChange = (e: string) => {
    status = e;
    requestFormData();
  };

  // 筛选类型记录
  const PhoneOrRemockChange = (e: string) => {
    condition = e;
    requestFormData();
  };

  useEffect(() => {
    // record_id = history.query.id || 251;
    requestFormData();
  }, []);

  useEffect(() => {
    console.log(history.location);
  }, []);

  return (
    <div className="add-user-record-detail w-full h-full flex flex-col">
      <Nav name="详情" router="/batch_add_user/record" />

      <div className="p-16 flex flex-1 flex-col">
        <div className="flex items-center justify-between">
          <div>
            <span className="font-semibold">共{customer_tatal}个客户</span>
            <span className="mx-8 text-grey-300">|</span>
            <span className="text-grey-400">已添加0个客户</span>
          </div>
          <div>
            <span>添加状态：</span>
            <Select
              className="mr-14"
              placeholder="请选择状态"
              style={{ width: 192 }}
              onChange={onTypeChange}>
              <Option value="">全部</Option>
              <Option value="NEW">待分配</Option>
              <Option value="WAIT">待添加</Option>
              <Option value="ADD">待通过</Option>
              <Option value="PASS">已添加</Option>
            </Select>
            <Search
              placeholder="搜索电话"
              onSearch={PhoneOrRemockChange}
              style={{ width: 196 }}
            />
          </div>
        </div>

        <div className="overflow-y-auto scrollY flex-1 mt-16">
          <Table
            columns={columns}
            dataSource={initFormData}
            pagination={false}
            loading={loding}
            locale={{
              emptyText: (
                <div>
                  <img
                    className="m-auto"
                    alt=""
                    src="https://assets.weibanzhushou.com/web/we-work-webapp/group-manage_search-empty.294f614b38df.svg"
                  />
                  <p>没有搜索到相关结果</p>
                </div>
              ),
            }}
          />
        </div>
        {page_total <= 1 ? null : (
          <Pagination
            className="text-right m-14"
            current={current}
            total={customer_tatal}
            pageSize={limit}
            pageSizeOptions={["5", "10", "20", "50", "100"]}
            onChange={(page: any, pageSize: any) => {
              current = page;
              limit = pageSize;
              requestFormData();
            }}
            onShowSizeChange={(page, pageSize) => {
              current = page;
              limit = pageSize;
            }}
          />
        )}
      </div>
    </div>
  );
};

export default AddUserRecordDetail;
